<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<!-- Mirrored from www.zi-han.net/theme/hplus/clients.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:44 GMT -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H+ 后台主题UI框架 - 客户管理</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<jsp:include page="common/header.jsp"></jsp:include>
<style type="text/css">
.img-item{
position: relative;
padding-bottom: 10px
}
.img-item-del{
position: absolute;
top: 0;
right: 0;

}
</style>
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content  animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox-content">
					<form method="get" class="form-horizontal" id="GoodsForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">商品名称</label>
                                <div class="col-sm-10">
                                    <input type="text" value="${good.name }" name="name" id="name" class="form-control">
                                </div>
                            </div>
                           <div class="form-group">
                                <label class="col-sm-2 control-label">商品所属一级分类</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b" id="categoryParentId" name="categoryParentId">
                                        <option value="-1">请选择</option>
	                                        <c:forEach items="${category1List }" var="cate">
	                                        	<option value="${cate.id }" <c:if test="${category.parentId == cate.id}">selected="selected"</c:if>>${cate.name }</option>
	                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">商品所属二级分类</label>
                                <div class="col-sm-10">
                                    <select class="form-control m-b" name="categoryId" id="categoryId">
                                        <option value="-1">请选择</option>
                                          <c:forEach items="${category2List }" var="category">
	                                        	<option value="${category.id }" <c:if test="${good.categoryId == category.id}">selected="selected"</c:if> >${category.name }</option>
	                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品序列号</label>
                                <div class="col-sm-10">
                                    <input type="text" value="${good.goodsSn }" class="form-control" name="goodsSn" id="goodsSn">
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品售价</label>
                                <div class="col-sm-10">
                                    <input type="text" value="${good.retailPrice }" class="form-control" name="retailPrice" id="retailPrice">
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品原价</label>
                                <div class="col-sm-10">
                                    <input type="text" value="${good.marketPrice }" class="form-control" name="marketPrice" id="marketPrice">
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品数量</label>
                                <div class="col-sm-10">
                                    <input type="text" value="${good.goodsNumber }" class="form-control" name="goodsNumber" id="goodsNumber">
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品简介</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" name="goodsBrief" id="goodsBrief">${good.goodsBrief }</textarea>
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品详细描述</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" id="KE" name="goodsDesc">${good.goodsDesc }</textarea>
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品主图</label>
                                <div class="col-sm-10">
                                	<img alt="" src="${pageContext.request.contextPath }/view/${good.primaryPicUrl }" id="primaryPicFileImg">
                                	<input type="hidden" name="primaryPicUrl" id="primaryPicUrl" value="${good.primaryPicUrl }">
                                    <input id="primaryPicFile" name="file" type="file" class="form-control">
                                </div>
                            </div>
                             <div class="form-group">
                                <label class="col-sm-2 control-label">商品列表图片</label>
                                <div class="col-sm-10">
                                	<div class="img-view">
	                                	<c:forEach items="${good.listPicUrls }" var="pic">
	           	                     		<div class="img-item"><img alt="" src="/wxShop/view/${pic}"><input type="hidden" value="${pic}" name="listPicUrl"><a class="btn btn-w-m btn-danger img-item-del">删除</a></div>
	                                	</c:forEach>
                                	</div>
                                    <input id="listPicUrlFile" name="file" type="file" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                	<input type="hidden" name="id" value="${good.id }">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                    <button class="btn btn-white" type="button" onclick="history.back()">取消</button>
                                </div>
                            </div>
                        </form>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="common/footer.jsp"></jsp:include>
<script src="${pageContext.request.contextPath }/static/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/kindeditor/kindeditor-all.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/kindeditor/lang/zh_CN.js"></script>
	<script>
		$(function() {
			var _validateObj = $("#GoodsForm").validate({
				rules:{ 
					name : "required",
					categoryParentId:{
						min:0
					},
					categoryId:{
						min:0
					},
					goodsSn : {
						required:!0
					},
				},
				messages:{ 
					name:"请输入商品名称",
					categoryParentId:"请选择一级分类",
					categoryId:"请选择二级分类",
					goodsSn:"请填写商品序列号",
				}
			});
			//分类级联
			$("#categoryParentId").change(function(){
				$.ajax({
					url:"${pageContext.request.contextPath }/sys/cate/getCates",
					type:"POST",
					data:{id:$("#categoryParentId").val()},
					dataType:"json",
					success:function(data){
						$("#categoryId option:gt(0)").remove();
						for(var i in data){
							$("#categoryId").append("<option value="+data[i].id+">"+data[i].name+"</option>");
						}
					},
					error:function(data){
						wxLayer.alert("操作失败");
					}
				})
			})
			
			
			$("#GoodsForm").submit(function(){
				
				//先判断验证是否通过
				if(_validateObj.form())
					$.ajax({
						url:"${pageContext.request.contextPath }/sys/goods/update",
						type:"POST",
						data:$("#GoodsForm").serialize(),
						dataType:"json",
						success:function(data){
							wxLayer.alert(data.message,function(){
								if(data.status)
									location.href = "${pageContext.request.contextPath }/sys/goods/list";
							});
						},
						error:function(data){
							wxLayer.alert("操作失败");
						}
					})
				return false;
			})
			
			$(".full-height-scroll").slimScroll({
				height : "100%"
			})
          	$(".img-item-del").bind("click",function(){
					$(this).parent().remove();
			})      		
       		$("#listPicUrlFile").change(function(){
       			$.ajaxFileUpload({
       				url:"${pageContext.request.contextPath }/upload",
       				type:"POST",
       				fileElementId:"listPicUrlFile",
       				dataType:"json",
       				success:function(data){
       					//
       					var _img_item = '<div class="img-item"><img alt="" src="/wxShop/view/{imgPath}" ><input type="hidden" value="{imgPath}" name="listPicUrl"><a class="btn btn-w-m btn-danger img-item-del">删除</a></div>';
       					_img_item = _img_item.replace(/{imgPath}/g,data.fileId);
       					_img_item = $(_img_item);
       					$(".img-view").append(_img_item);
       					_img_item.find(".img-item-del").bind("click",function(){
       						$(this).parent().remove();
       					})
       				},
       				error:function(data){
       					console.error("upload file error");
       				}
       			});
       		})
    		$("#primaryPicFile").change(function(){
    			$.ajaxFileUpload({
    				url:"${pageContext.request.contextPath }/upload",
    				type:"POST",
    				fileElementId:"primaryPicFile",
    				dataType:"json",
    				success:function(data){
    					//
    					$("#primaryPicUrl").val(data.fileId);
    					$("#primaryPicFileImg").attr("src","${pageContext.request.contextPath }/view/" +data.fileId);
    				},
    				error:function(data){
    					console.error("upload file error");
    				}
    			});
    		})
		});
		window.KEeditor = KindEditor.create('textarea#KE', {
			themeType: 'simple',
			uploadJson: '${pageContext.request.contextPath }/keupload',
			afterBlur: function() {
				this.sync();
			},
		});
		
		
	</script>
</body>
</html>
